/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, DatePicker, Select, Breadcrumb, Icon, Empty, Col } from 'antd';
import {connect} from 'dva';
import 'braft-editor/dist/index.css'
import Zmage from 'react-zmage';
import request from '@/utils/request';
import party_top from '../../images/party_top.jpg';
import styles from './homePage.less';
import styles2 from './../ArticleManage/index.less'
import ReactDataGrid from 'react-data-grid';
import Loading from '@/components/Loading';
import party from '../../images/party.png';
import MyPagination from '@/components/MyPagination';

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      all_roles: [],
      html: '',
      data: [],
      type: '',
      loading:false,
      page:1,
      per_page:30,
      meta: {total: 0, per_page: 30,current_page:1},

    };
  }
  componentDidMount() {
    const pathname=this.props.history.location.pathname
    const that=this;
    const params={
      type:pathname.split('/')[pathname.split('/').length-1],
      page:1,
      per_page:30
    }
    this.fetch(params)

  }
  fetch=(params)=>{
    console.log(this.props.history.location)
    const pathname =this.props.history.location.pathname
    const that=this
    request(`/articles`, {
      method: 'GET',
      params:{
        ...params,
        order_direction:'desc'
      }
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          data:response.data.data,
          meta:response.data.meta,
          ...params
        });
      }
    });
  }
  renderType=(value)=>{
    console.log('value',value)
    let map=[{id:'1',name:'首页轮播'},{id:'2',name:'党建动态'},{id:'3',name:'时事要闻'},{id:'4',name:'活动会议'},{id:'5',name:'主题党日'},
      {id:'6',name:'支部荣誉'},{id:'7',name:'党员风采'},{id:'8',name:'学习内容'}];
    for(let i=0;i<map.length;i++){
      if(Number(value)===Number(map[i].id)){
        console.log('value',map[i].name)
        return map[i].name
      }
    }
  }
  render() {

    console.log('this.state.type',this.state.type)

    return (
      <div style={{width:'100%',minHeight:'100vh',background:'#f0f2f5'}}>
        <div
          style={{ display:'flex',minHeight:'100vh',background:'#fff',flexDirection:'column',overflow: 'auto',
            maxWidth: 1070, margin: '0 auto' }}>
          <div>
            <img style={{ width: '100%', height: 'auto' }} src={party_top} alt=""/>
          </div>
          <div style={{fontSize:'16px',padding:'10px 20px',color:'#333'}}>
            <span onClick={()=>{
              window.open(`http://${window.location.host}/party_home`);
            }} className={styles.hover}>返回首页</span>
          </div>
          <div className={'table-data-content'} style={{display:'flex'}}>
            <div style={{width:'200px',height:'auto',marginRight:'10px'}}>
              {[{id:1,name:'首页轮播'},{id:2,name:'党建动态'},{id:3,name:'时事要闻'},{id:4,name:'活动会议'},{id:5,name:'主题党日'},
                {id:6,name:'支部荣誉'},{id:7,name:'党员风采'},{id:8,name:'学习内容'}].map((item,index)=>{
                return  <div onClick={()=>{
                  this.setState({
                    type:item.id,

                  },function() {
                    this.fetch({
                      type:item.id,
                      page:1,
                      per_page:30,
                    })
                  })
                }} key={index} style={{background:'#eeeeee'}} className={Number(this.state.type)===item.id?styles2.item_active:styles2.item}>{item.name}</div>
              })}
            </div>
            <div style={{flex:'1'}}>
              <div className={styles.home_info_box} style={{marginTop:'0',height:'auto'}}>
                <div className={styles.home_info_title}>
                  <div><img className={styles.flag} src={party} alt=""/>{this.renderType(this.state.type)}</div>
                </div>
                <div className={styles.home_info_content} style={{height:'auto'}}>
                  {this.state.data.map((item,index)=>{
                    return <div  key={index} className={styles.home_info_item}>
                      <div className={styles.item_img}>
                        <img src="https://demo.fanpusoft.com/res/themes/Custom_Default/red_list.gif" alt=""/>
                      </div>
                      <div onClick={()=>{
                        window.open(`http://${window.location.host}/party_article/${item.id}`);
                      }} className={styles.item_content}>{item.tag&&<span
                        style={{ color: '#fe4444' }}>[{item.tag}] </span>} {item.title}
                      </div>
                      <div className={styles.item_data}>{item.date}</div>
                    </div>
                  })}
                </div>
                {
                  this.state.data.length===0&&
                  <div className={styles.home_info_content}>
                    <div className={styles.empty}>
                      <Empty/>
                    </div>
                  </div>
                }
              </div>
              {
                this.state.loading&&<Loading />
              }
              <div className="table-pagination"  style={{textAlign:'center',marginBottom:'16px',marginTop:'12px',paddingLeft:'12px'}}>
                <MyPagination searchCondition={{
                  type: this.state.type,
                  page:this.state.page,
                  per_page:this.state.per_page
                }} meta={this.state.meta} handleSearch={this.fetch}/>
              </div>


            </div>

          </div>

        </div>

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


